import React from 'react';
import './NewsCard.css';

interface NewsCardProps {
  title: string;
  source: string;
  date: string;
  summary: string;
  impact: string;
  relatedStocks: string[];
}

const NewsCard: React.FC<NewsCardProps> = ({ 
  title, 
  source, 
  date, 
  summary, 
  impact,
  relatedStocks 
}) => {
  const getImpactColor = () => {
    switch(impact.toLowerCase()) {
      case 'high': return '#f56565';
      case 'medium': return '#f6ad55';
      case 'low': return '#68d391';
      default: return '#a0aec0';
    }
  };

  return (
    <div className="news-card">
      <div className="news-header">
        <h3 className="news-title">{title}</h3>
        <div className="news-meta">
          <span className="news-source">{source}</span>
          <span className="news-date">{date}</span>
        </div>
      </div>
      <div className="news-summary">{summary}</div>
      <div className="news-footer">
        <div className="impact-tag" style={{ backgroundColor: getImpactColor() }}>
          影响: {impact}
        </div>
        {relatedStocks.length > 0 && (
          <div className="related-stocks">
            相关个股: {relatedStocks.join(', ')}
          </div>
        )}
      </div>
    </div>
  );
};

export default NewsCard;